<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-09 18:46:44
 * @LastEditTime: 2020-04-21 23:48:45
 * @FilePath: \blog-pages\src\views\MainPage.vue
 * @Description: 主页面
 -->

<template>
  <div class="comm-con">
    <nav-bar></nav-bar>
    <!-- 网格系统 -->
    <b-container class="main">
      <b-row>
        <b-col cols="12" sm="12" md="12" lg="8" xl="8" class="left-container">
          <!-- 轮播图 -->
          <!-- <carousel class="carousel"></carousel> -->
          <b-tabs>
            <b-tab title="我的博文">
              <articles></articles>
            </b-tab>
            <b-tab title="热门文章">
              <hot-articles></hot-articles>
            </b-tab>
          </b-tabs>
        </b-col>
        <b-col cols="12" sm="12" md="12" lg="4" xl="4" class="right-container">
          <!-- 利用media组件展示个人信息模块 -->
          <b-col cols="12" sm="12" md="12" lg="12" xl="12" class="pad0">
            <blog-info></blog-info>
          </b-col>
          <!-- 文章分类 -->
          <b-col cols="12" sm="12" md="12" lg="12" xl="12" class="pad0">
            <article-kinds></article-kinds>
          </b-col>
          <!-- 全部标签 -->
          <b-col cols="12" sm="12" md="12" lg="12" xl="12" class="pad0">
            <tags></tags>
          </b-col>
        </b-col>
      </b-row>
    </b-container>
    <Footer></Footer>
  </div>
</template>

<script>
import url from "@/request/url";
import { mapMutations, mapState } from "vuex";

export default {
  name: "mainPage",
  components: {
    Footer: () => import("@/components/Footer"),
    NavBar: () => import("@/components/NavBar"),
    articles: () => import("@/components/Articles"),
    blogInfo: () => import("@/components/BlogInfo"),
    tags: () => import("@/components/Tags"),
    articleKinds: () => import("@/components/ArticleKinds"),
    hotArticles: () => import("@/components/HotArticles")
  }
};
</script>

<style scoped>
.left-container {
  padding-top: 10px;
  border-right: solid rgba(0, 0, 0, 0.1) 1px;
}
.right-container {
  padding-top: 10px;
}
.pad0 {
  padding: 0;
}
</style>
